<template>
    <div class="vueAnimationPrc5">
      <button @click="show=!show">
        toggle
      </button>
      <br>
      <transition name="bounce">
        <p v-if="show"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis
      enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi
      tristique senectus et netus.</p>
      </transition>
    </div>
</template>
<script lang="ts">
import { Vue, Options, Watch, Provide } from 'vue-property-decorator';

@Options({ components: {

} })
export default class VueAnimationPrc5 extends Vue {
  public show = true;
  public beforeCreate() {
  }
}
</script>

<style lang="postcss" scoped>
.vueAnimationPrc5{
  .bounce-enter-active{
    animation: bounce-in 0.5s;
  }
  .bounce-leave-active{
    animation: bounce-in 0.5s reverse;
  }

  @keyframes bounce-in{
    0%{
      transform: scale(0);
    }
    50%{
      transform: scale(1.25);
    }
    100%{
      transform: scale(1);
    }
  }
}
</style>
